import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_book_store/home_model.dart';
import 'package:flutter_book_store/routes/app_pages.dart';
import 'package:get/get.dart';

class UserPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          UserInfoBar(),
          GestureDetector(
            onTap: (){

            },
            child: UserItemBar(
              icon: Icons.star_border,
              text: '我的收藏',
            ),
          ),
          SizedBox(height: 1),
          UserItemBar(
            icon: Icons.message_outlined,
            text: '我的评论',
          ),
          SizedBox(
            height: 5,
          ),
          GestureDetector(
            onTap: (){
              Get.toNamed(Routes.SETTING);
            },
            child: UserItemBar(
              icon: Icons.settings,
              text: '设置',
            ),
          ),
        ],
      ),
    );
  }
}

class UserInfoBar extends StatefulWidget {
  @override
  _UserInfoBarState createState() => _UserInfoBarState();
}

class _UserInfoBarState extends State<UserInfoBar> {
  HomeModel _homeModel;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _homeModel = Get.find();
  }

  var _height = 20.0;

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 300),
      padding: EdgeInsets.fromLTRB(10, 10, 10, _height),
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage('images/userTopImg.png'), fit: BoxFit.cover)),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                _height = _height + 20;
                if (_height > 40) {
                  _height = 20;
                }
              });
            },
            child: Container(
              padding: EdgeInsets.all(5),
              child: Center(
                child: Obx(() => Expanded(
                  child: Text(
                        _homeModel.name.value,overflow: TextOverflow.ellipsis,maxLines: 1,
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 28,
                            fontWeight: FontWeight.bold),
                      ),
                )),
              ),
              width: 72,
              height: 72,
              decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.all(Radius.circular(72))),
            ),
          ),
          SizedBox(
            width: 16,
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Obx(() => Text(
                    _homeModel.nickName.value,
                    style: TextStyle(fontSize: 24, color: Colors.black),
                  )),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: Text(
                  '用户名：' + _homeModel.name.value,
                  style: TextStyle(fontSize: 16, color: Colors.black),
                ),
              ),
              Obx(() => Text(
                    '工号：' + _homeModel.jobNumber.value.toString(),
                    style: TextStyle(fontSize: 16, color: Colors.black),
                  )),
            ],
          )
        ],
      ),
    );
  }
}


class UserItemBar extends StatelessWidget {
  final icon;
  final text;

  const UserItemBar({Key key, this.icon, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(15),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Icon(icon),
                SizedBox(width: 10),
                Text(
                  text,
                  style: TextStyle(fontSize: 16, color: Colors.black),
                )
              ],
            ),
            Icon(
              Icons.chevron_right,
              size: 20,
            ),
          ],
        ),
      );
  }
}
